<template>
  <div class="head">
    <el-col :span="4">
      <el-select v-model="select" size="large" placeholder="所属门店" style="width: 200px">
        <el-option label="全局分类" value="1" />
        <el-option label="杭州良渚永旺Mall" value="2" />
        <el-option label="杭州城西银泰城MALL" value="3" />
        <el-option label="新峰商务大楼" value="4" />
      </el-select>
    </el-col>
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    <el-button type="success" size="default" :icon="Plus" @click="goAdd">添加分类</el-button>
    <el-button type="danger" size="default" :icon="Delete">删除所有类目</el-button>
  </div>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号/名称">
        <template #default="scope">{{ scope.row.id }}&nbsp;{{scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="编号/名称">
        <template #default="scope">{{ scope.row.key }}<br />{{scope.row.type }}</template>
      </el-table-column>
      <el-table-column label="图标">
        <template #default="scope">
          <img class="pic" :src="scope.row.icon" style="width: 70px" />
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <img class="pic" v-if="scope.row.pic" :src="scope.row.pic" style="width: 70px" />
          <p v-else>-</p>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-button type="success" v-show="scope.row.isUse==true" plain>启用</el-button>
          <el-button type="danger" v-show="scope.row.isUse==false" style="margin-left: 0;" plain>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link>编辑</el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="toggleSelection([tableData[1], tableData[2]])">批量删除</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElTable } from "element-plus";
import { Search, Plus, Delete } from "@element-plus/icons-vue";
import { goodsCateList } from "../api/goodsCate"

import { useRouter } from "vue-router"
const multipleTableRef = ref("");
const multipleSelection = ref("");
const toggleSelection = ref("");
const handleSelectionChange = ref("");

const router = useRouter()

const select = ref("")

let tableData = ref([])


function getList() {
  goodsCateList().then(res => {
    if (res.code === 0) {
      tableData.value = res.data
    }
  })
}

function goAdd() {
  router.push("/product/add")
}

onMounted(() => {
  getList()
})


const currentPage1 = ref(5);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(1);
const pageSize2 = ref(50);
const pageSize3 = ref(50);
const pageSize4 = ref(50);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = ref("");
const handleCurrentChange = ref("");
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
}
</style>